<template>
  <div class="flex justify-between items-start secretary-index">
    <div class="right">
      <div v-for="(v, i) of mailData" :key="i">
        <MailBox :title="v.title" :listData="v.dataArr" @clickName="clickName"></MailBox>
      </div>
    </div>
    <div class="left">
      <TitleBox class="mb-4" :icon="require('@STmailboxesWeb/assets/imgs/icon_ggl.png')" title="公告栏">
        <template v-slot:content="{}">
          <div class="flex justify-start items-center arrow cursor-pointer" @click="toBoard">
            <i class="el-icon-caret-right" style="color: #3f7bcd"></i>
            <span class="title-text">致广大网友的一封信！</span>
          </div>
        </template>
      </TitleBox>
      <TitleBox class="mb-4" :icon="require('@STmailboxesWeb/assets/imgs/icon_wxts.png')" title="温馨提示">
        <template v-slot:content="{}">
          <div class="mb-4">
            为了减少中间环节，提高信件处理效率，请您在写信前注意：
          </div>
          <p>1、仔细阅读领导分工；</p>
          <p>2、仔细阅读写信须知；</p>
          <p>3、不要一信多投和重复提交；</p>
          <p>
            4、属部门和园区、乡镇、街道权限范围内的事项，请直接给单位、部门写信；
          </p>
          <p>5、对涉法涉诉事项，请向司法机关提交。</p>
          <div class="mt-4">谢谢支持！</div>
        </template>
      </TitleBox>
      <TitleBox class="mb-4" :icon="require('@STmailboxesWeb/assets/imgs/icon_xxxd.png')" title="信息选登" :showMore="true"
        @clickMore="clickMore">
        <template v-slot:content="{}">
          <!-- <div
            class="flex justify-start items-center arrow"
            v-for="(v, i) of 5"
            :key="i"
          >
            <i class="el-icon-caret-right" style="color: #3f7bcd"></i>
            <span class="title-text">致广大网友的一封信！</span>
          </div> -->
          <autoScroll :list="mailData" :speed="0.2" :waitTime="7000" :singleHeight="5000">
            <div class="t-item cursor-pointer" v-for="(item, index) of mailData" :key="index">
              <i class="el-icon-caret-right" style="color: #3f7bcd"></i>
              <span class="title-text">致广大网友的一封信！{{ item.title }}</span>
              <!-- <div class="tvalue" style="flex: 0 0 30%;">{{ item.jgjc }}</div>
              <span class="tvalue">{{ item.total || '--' }}</span>
              <span class="tvalue" style="color:#0FCBDE">{{ item.ypc || '--' }}</span>
              <span class="tvalue" style="color:#F15730">{{ item.zlz || '--' }}</span>
              <span class="tvalue" style="color:#17DB68">{{ item.zlwc || '--' }}</span> -->
            </div>
          </autoScroll>
        </template>
      </TitleBox>

      <!-- <TitleBox :icon="require('@STmailboxesWeb/assets/imgs/icon_tj.png')" title="信件查询">
        <template v-slot:content="{}">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item label="" prop="code">
              <el-input v-model="ruleForm.code" placeholder="请输入信件编码"></el-input>
            </el-form-item>
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入信件姓名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">搜索</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </template>
      </TitleBox> -->
      <LetterInquiry class="mb-10 form-tj"></LetterInquiry>
      <TitleBox class="mb-4" :icon="require('@STmailboxesWeb/assets/imgs/icon_xjcx.png')" title="信件统计">
        <template v-slot:content="{}">
          <div class="fc-1655ab" style="margin-bottom: 10px;">
            2023年10月，“书记、县长信箱”对符合受理范围的 109
            件群众来信进行了办理。
          </div>
          <div class="list-xjcx">
            <div class="">本月</div>
            <div>收到信件 30件</div>
            <div class="flex justify-start items-center">
              <div class="w-1/2">收到信件 30件</div>
              <div class="w-1/2">收到信件 30件</div>
            </div>
          </div>
          <div class="list-xjcx">
            <div class="">本年</div>
            <div>收到信件 30件</div>
            <div class="flex justify-start items-center">
              <div class="w-1/2">收到信件 30件</div>
              <div class="w-1/2">收到信件 30件</div>
            </div>
          </div>
        </template>
      </TitleBox>
    </div>
  </div>
</template>

<script>
import MailBox from "@STmailboxesWeb/components/mailBox";
import TitleBox from "@STmailboxesWeb/components/titleBox";
import autoScroll from "@/components/autoScoll/index.vue";
import LetterInquiry from "@STmailboxesWeb/components/LetterInquiry";


export default {
  components: {
    MailBox,
    TitleBox,
    autoScroll,
    LetterInquiry
  },
  data() {
    return {
      mailData: [
        {
          title: "书记信箱",
          dataArr: [
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
          ],
        },
        {
          title: "县长信箱",
          dataArr: [
            {
              name: "县长信",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
          ],
        },
        {
          title: "县委信箱",
          dataArr: [
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
          ],
        },
        {
          title: "县人大信箱",
          dataArr: [
            {
              name: "县长信",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
          ],
        },
        {
          title: "县政府信箱",
          dataArr: [
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
          ],
        },
        {
          title: "县政协信箱",
          dataArr: [
            {
              name: "县长信",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
          ],
        },
        {
          title: "法检两院信箱",
          dataArr: [
            {
              name: "县长信",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
          ],
        },
        {
          title: "园区信箱",
          dataArr: [
            {
              name: "县长信",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
          ],
        },
        {
          title: "部门信箱",
          dataArr: [
            {
              name: "县长信",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
          ],
        },
        {
          title: "镇乡信箱",
          dataArr: [
            {
              name: "县长信",
              num: 0,
              totle: 50,
            },
            {
              name: "张新",
              num: 0,
              totle: 50,
            },
          ],
        },
      ],

    };
  },
  methods: {
    clickName(data) {
      console.log("clickName", data);
      this.$router.push({
        path: '/notice',
      })
    },
    toBoard() {
      this.$router.push({
        path: '/Board',
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    clickMore() {
      this.$router.push({
        path: '/InfoSel',
      })
    }
  },
};
</script>

<style lang='scss' scoped>
.secretary-index {
  height: 100%;

  .right {
    width: 68%;
    // background: #d3e1e7;
    // border: 1px solid #d5d5d5;
    height: 100%;
    border: 1px solid #d5d5d5;
    padding: 20px;
    background: #fff;
  }

  .left {
    width: 30%;
    height: 100%;

    .arrow {
      margin-bottom: 14px;
    }

    .form-tj {
      background: #e2efff;
      border: 1px solid #d6ddeb;
    }



    .list-xjcx {
      // margin-top: 16px;
      border: 1px solid #cfdae8;
      border-bottom: none;

      >div {
        border-bottom: 1px solid #cfdae8;
        height: 30px;
        line-height: 30px;
        padding: 0px 5px;
        color: #333333;
        font-size: 12px;
      }

      >div:first-child {
        font-weight: 500;
        color: #1655ab;
      }
    }

  
    // 信息选登 滚动模块高度
    .scroll-outer {
      height: 200px;
    }

    .t-item {
      line-height: 30px;
    }

  }

  // 公共
  .fc-1655ab {
    color: #1655ab;
  }
}

::v-deep {
  .form-tj .el-form-item__content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    >button {
      width: 50%;
      margin: 0px;
      border-radius: 2px 0px 0px 2px;
    }

    >button:first-child {
      background: linear-gradient(179deg, #3a8edc 0%, #2a6aa5 100%);
    }

    >button:last-child {
      color: #1655ab;
      border-radius: 0px 2px 2px 0px;
      border: 1px solid #a9bbd2;
    }
  }
}
</style>